@extends('admin.layout.base')
@section('styles')
    <style>
        .ad-img{
            width: 200px;
            height: 150px;
            border: 1px dashed #d9d9d9;
            display: block;
        }
        .ad-uploader-icon{
            cursor: pointer;
            font-size: 28px;
            color: #8c939d;
            width: 200px;
            height: 150px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            line-height: 150px;
            text-align: center;
        }

    </style>
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-list">
            <div class="panel-header">
                <div class="panel-title">
                    广告管理【{{ $info['title'] }}】
                </div>
            </div>
            <el-alert type="primary" :closable="false">
                <template slot="title">
                    <i class='fa fa-bullhorn'></i> 广告位尺寸大小为 {{ $info['width'] }} x {{ $info['height'] }}，广告图片建议采用相同大小的尺寸；广告排序数字越小越显示在前面。
                </template>
            </el-alert>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                    <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
                </div>
                <div class="panel-search">
                    <div class="panel-search-item">
                        <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入广告链接地址" class="input-with-select">
                            <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          :data="listData" border>
                    <el-table-column align="center" prop="id" label="编号" width="60"></el-table-column>
                    <el-table-column align="center" prop="thumb" label="封面" width="120">
                        <template slot-scope="scope">
                            <el-popover placement="right" trigger="click">
                                <img :src="scope.row.thumb" style="width: 550px;height: auto"/>
                                <el-button slot="reference"
                                           style="border: none;height: 50px;padding: 0;overflow: hidden">
                                    <img title="点击查看原图" alt="点击查看原图" :src="scope.row.thumb"
                                         style="height: 50px;width: 100px"/>
                                </el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="title" label="名称" width="150"></el-table-column>
                   <!--  <el-table-column align="center" prop="link" label="链接" :show-overflow-tooltip="true" width="250"></el-table-column> -->
                    <el-table-column align="center" prop="sort" label="排序" width="80"></el-table-column>
                   
                    <el-table-column align="center" prop="status_text" label="状态" width="75">
                        <template slot-scope="scope">
                            <span v-html="scope.row.status_text"></span>
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" >
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" icon="fa fa-edit" type="primary" size="mini" plain> 编辑</el-button>
                            <el-button v-if="scope.row.status == 1" @click="lock(scope.row.id)" icon="fa fa-lock" type="danger" size="mini" plain> 锁定</el-button>
                            <el-button v-if="scope.row.status == 2" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain> 启用</el-button>
                            <el-button @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData">
                    <div class="pagination-total">共 <em> @{{listData.length}} </em> 条记录</div>
                </div>
            </div>
        </div>
        <!-- 表单弹窗-->
        <el-dialog
                v-if="dialog.show"
                :title="dialog.title"
                :top="dialog.top"
                :visible.sync="dialog.show"
                :width="dialog.width">
            <el-form :model="form" ref="form" label-width="100px">
                <el-form-item :rules="[{ required: true, message: '请输入广告名称', trigger: 'blur'}]" label="名称：" prop="title">
                    <el-input clearable  v-model="form.title" placeholder="请输入广告名称"></el-input>
                </el-form-item>
               <!--  <el-form-item :rules="[{ required: true, message: '请输入广告链接', trigger: 'blur'}]" label="链接：" prop="link">
                    <el-input clearable  v-model="form.link" placeholder="请输入广告链接"></el-input>
                </el-form-item> -->
                <el-form-item v-if="{{ $info['id'] }} == 2" label="类目：" prop="cate_id">
                    <el-cascader placeholder="请选择类目"
                                 separator=">"
                                 :options="categoys"
                                 expand-trigger="hover"
                                 v-model="form.cate_id">
                    </el-cascader>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请上传广告图片', trigger: 'blur'}]" label="图片：" prop="thumb">
                    <el-upload
                            class="ad-uploader"
                            :action="upload_image"
                            :show-file-list="false"
                            name="image"
                            :limit="1"
                            :on-success="uploadSuccess"
                            :before-upload="uploadBefore">
                        <img v-if="form.thumb" :src="form.thumb" class="ad-img">
                        <i v-else class="el-icon-plus ad-uploader-icon"></i>
                        <div slot="tip" class="el-upload__tip">图片大小不能超过 2MB，建议尺寸{{ $info['width'] }} x {{ $info['height'] }}!</div>
                    </el-upload>
                </el-form-item>
                <el-form-item required label="排序：" prop="sort">
                    <el-input clearable  v-model="form.sort" placeholder="请输入类目排序"></el-input>
                </el-form-item>
                
                
                <el-form-item required label="状态：" required prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1" border>正常</el-radio>
                        <el-radio :label="2" border>锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        listData: [],//列表数据
                        params: {kwd: '', adsense_id: "{{ $id }}"},
                        loading: false,
                        upload_image: UPLOAD_IMAGE,
                        date: this.date,
                        dialog: {
                            title: '',
                            top: '10vh',
                            show: false,
                            width: '600px'
                        },
                        form:null,
                        categoys: {!! $categorys !!},
                    }
                },
                created(){
                    this.list();
                },
                methods: {
                    uploadSuccess(res) {
                        this.form.thumb = res.data.path;

                    },
                    uploadBefore(file) {
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (!isLt2M) {
                            this.$message.error('图片大小不能超过 2MB!');
                        }
                        return isLt2M;
                    },
                    //列表
                    list(){
                        let that = this;
                        this.loading = true;
                        setTimeout(()=>{
                            $.get("{{ route('admin.ad.list') }}",this.params,function (res) {
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.listData = res.data;
                                    that.loading = false;
                                }
                            },'JSON');
                        },500);
                    },
                    //新增
                    create(){
                        this.form = {
                            id: 0,
                            adsense_id: this.params.adsense_id,
                            title: '',
                            thumb: '',                                                    
                            status: 1,
                            sort: 0,                           
                            cate_id: [],
                            _token: "{{csrf_token()}}"
                        };
                        this.date = [];
                        this.dialog.title = '新增广告';
                        this.dialog.show = true;
                    },
                    //编辑
                    edit(info){
                        this.form = {
                            id: info.id,
                            adsense_id: info.adsense_id,
                            thumb: info.thumb,
                            title: info.title,
                           
                            
                            status: info.status,
                            sort: info.sort,
                           
                            cate_id: [info.cate_id],
                            _token: "{{csrf_token()}}"
                        };
                        if(info.start_at == null && info.end_at == null){
                            this.date = [];
                        }else{
                            this.date = [info.start_at, info.end_at];
                        }
                        this.dialog.title = '编辑广告';
                        this.dialog.show = true;
                    },
                    //筛选
                    search(){
                        this.list();
                    },
                   
                    //锁定
                    lock(id){
                        let that = this;
                        $.post("{{ route('admin.ad.lock') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    },
                    //激活
                    active(id){
                        let that = this;
                        $.post("{{ route('admin.ad.active') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    },
                    //更新
                    update(){
                        this.$refs['form'].validate((valid) => {
                            if (valid) {
                                let that = this;
                                $.post("{{ route('admin.ad.update') }}",this.form,function (res) {
                                    if(res.code){
                                        that.$message.error(res.msg);
                                    }else{
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose:() =>{
                                                that.dialog.show = false;
                                                that.list();
                                            }
                                        });
                                    }
                                },'JSON');
                            }
                        });
                    },
                    //删除
                    destroy(id){
                        let that = this;
                        this.$confirm('确定要删除该广告信息吗？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            $.post("{{ route('admin.ad.destroy') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.list();
                                }
                            },'JSON');
                        }).catch(() => {});
                    },
                }
            });
        })
    </script>
@endsection
